<template>
  <div class="wfull flex gap1">
    <ElSelect v-model="microName" @change="onMicroChanged">
      <ElOption label="无" value="" />
      <ElOption label="应用" value="_" />
      <ElOption v-for="(micro, microName) in micros" :label="micro.label" :value="microName" :key="microName" />
    </ElSelect>
    <ElSelect v-model="seedName" @change="onSeedChanged">
      <ElOption label="无" value="" />
      <ElOption v-for="(seed, seedName) in seeds" :label="seed.label" :value="seedName" :key="seedName" />
    </ElSelect>
    <ElSelect v-model="actionName">
      <ElOption v-for="(action, actionName) in actions" :label="action.label" :value="actionName" :key="actionName" />
    </ElSelect>
    <!-- <ElSelect v-model="columnName">
      <ElOption v-for="(column, columnName) in columns" :label="column.label" :value="columnName" />
    </ElSelect> -->
  </div>
</template>
<script lang="ts" setup>
  import { currentApp, currentMicro } from '@/views/seed-dev';
  import { ElSelect, ElOption } from 'element-plus'
  import { computed, onMounted, ref, watch } from 'vue';

  const props = defineProps<{seedName: string, modelValue?: string}>()
  const emits = defineEmits(['update:modelValue'])

  const microName = ref()
  const seedName = ref()
  const actionName = ref()
  // const columnName = ref()

  function init() {
    const modelValue = props.modelValue
    if(modelValue) {
      // const pos = modelValue.lastIndexOf('.')
      // columnName.value = modelValue.substring(pos + 1)
      // const r = modelValue.substring(0, pos)
      const items = modelValue.split('.')
      const len = items.length
      if(len === 1) {
        actionName.value = items[0]
      } else if(len === 2) {
        seedName.value = items[0]
        actionName.value = items[1]
      } else if(len === 3) {
        microName.value = items[0] || '_'
        seedName.value = items[1]
        actionName.value = items[2]
      }
    }
    console.log('actionName===123', microName.value, seedName.value, actionName.value)
  }

  const micros = computed(() => currentApp.value?.micros || {})
  const seeds = computed(() => {
    if(!microName.value || microName.value === '_') return currentApp.value.seeds || {}
    return currentApp.value.micros[microName.value]?.seeds || {}
  })
  const actions = computed(() => {
    if(microName.value) {
      if(seedName.value) {
        if(microName.value === '_') return currentApp.value.seeds[seedName.value].actions || {}
        else return currentApp.value.micros[currentMicro.value].seeds[seedName.value].actions || {}
      } else {
        return {}
      }
    } else {
      if(seedName.value) {
        return currentApp.value.seeds[seedName.value].actions || {}
      } else {
        const app = currentApp.value
        const micro = currentMicro.value
        return micro ? app.micros[micro].seeds[props.seedName].actions || {} : app.seeds[props.seedName].actions || {}
      }
    }
  })

  function onMicroChanged() {
    seedName.value = void 0
    actionName.value = void 0
  }

  function onSeedChanged() {
    actionName.value = void 0
  }
  // const columns = computed(() => {
  //   if(microName.value) {
  //     if(seedName.value) {
  //       if(microName.value === '_') return currentApp.value.seeds[seedName.value].columns || {}
  //       else return currentApp.value.micros[currentMicro.value].seeds[seedName.value].columns || {}
  //     } else {
  //       return {}
  //     }
  //   } else {
  //     if(seedName.value) {
  //       return currentApp.value.seeds[seedName.value].columns || {}
  //     } else {
  //       const app = currentApp.value
  //       const micro = currentMicro.value
  //       return micro ? app.micros[micro].seeds[props.seedName].columns || {} : app.seeds[props.seedName].columns || {}
  //     }
  //   }
  // })

  onMounted(() => init())
  // watch(microName, () => seedName.value = void 0)
  // watch(seedName, () => actionName.value = void 0)
  
  watch(() => props.modelValue, () => init())
  watch([microName, seedName, actionName], () => {
    if(actionName.value) {
      let ret = `${actionName.value}`
      if(seedName.value) ret = `${seedName.value}.${ret}`
      if(microName.value === '_') ret = `.${ret}`

      emits('update:modelValue', ret)
    }
  })
</script>